// const button = document.querySelector('button#test');

async function paste() {
  let text = await navigator.clipboard.readText();
  // alert(text);
  console.log("clip", text);
  let tip = document.createElement("div");
  tip.innerText=`Clipboard: ${text}`;
  document.body.appendChild(tip);

  if(!text.startsWith("http")){
    return;
  }


  //   fetch("https://jsonplaceholder.typicode.com/posts/1")
  // .then((response) => response.json())
  // .then((json) => console.log(json));

    // let url = "https://api.bilibili.com/x/player/videoshot?aid=113259545891941&cid=26166562321";
    // url = "https://jsonplaceholder.typicode.com/posts/1";
    let url = text;

  //   fetch(url, {
  //       // https://stackoverflow.com/questions/42239643/when-do-browsers-send-the-origin-header-when-do-browsers-set-the-origin-to-null
  //       mode: 'no-cors',
  //   })
  // .then((response) => response.json())
  // .then((json) => console.log(json))
  // // .then((json)=> handleJson(json))

    fetch(url, {
        // https://stackoverflow.com/questions/42239643/when-do-browsers-send-the-origin-header-when-do-browsers-set-the-origin-to-null
        mode: 'no-cors',
    })
        .then((response) => response.json())
        //   .then((json) => console.log(json))
        .then((json) => handleJson(json))
        ;

}

        let img_x_len = 0;
        let img_y_len = 0;
        let width, height = 0;
        let images;

    function handleJson(json) {
        // console.log("json", json);
        img_x_len = json.data.img_x_len;
        img_y_len = json.data.img_y_len;
        width = json.data.img_x_size;
        height = json.data.img_y_size;
        images = json.data.image;
        // console.log("img_x_len", img_x_len);
        console.log("w", width, "h", height);
        // console.log("images", images);
        // images.forEach(img => {
        //     console.log(img);
        // });

        var r = document.querySelector(':root');
        r.style.setProperty('--width', width);
        r.style.setProperty('--height', height);

        // let rs=getComputedStyle(r);
        // // console.log("getComputedStyle", rs);
        // let w = rs.getPropertyValue("--width");
        // console.log("comp w", w, "h", rs.getPropertyValue("--height"));

        genGrids();
    }


    function genGrids() {
        for (let i = 0; i < images.length; i++) {

            imgSrc="https:"+images[i];

            let elm = document.createElement("div");
            elm.innerText = imgSrc;
            document.body.appendChild(elm);

            for (let y = 0; y < img_y_len; y++) {
                for (let x = 0; x < img_x_len; x++) {
                    let elm = document.createElement("div");

                    elm.className = "wrap";
                    // elm.style=`width:${width}px; height:${height}px; overflow: hidden; display: inline-block;`;

                    elm.innerHTML = `<img style="margin: -${y * height}px 0px 0px -${x * width}px" src='${imgSrc}'></img>`;
                    document.body.appendChild(elm);
                }
            }
        }
    }

// button.addEventListener('click', paste);

window.onload = paste;
// window.onload = setTimeout(paste, 1000);
